.headerClass {
  display: flex;
  flex-wrap: wrap;
  left: 3px;
  top: 6px;
  min-width: 1200px;
  height: 62px;
  line-height: 20px;
  background-color: #0082df;
  text-align: center;
  img {
    &:nth-of-type(1) {
      flex-wrap: wrap;
      justify-content: flex-end;
      position: relative;
      left: 9px;
      top: 8px;
      width: 45px;
      height: 44px;
      border-radius: 50%;
      margin-right: 10px;   
    }
    &:nth-of-type(2) {
      position: relative;
      left: 90px;
      top: 14px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
  label {
    position: relative;
    &:nth-of-type(1) {
      left: 20px;
      top: 22px;
      width: 103px;
      height: 42px;
      font-size: 28px;
      text-align: left;
      color: #ffcf00;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      margin-right: 10px;
    }
    &:nth-of-type(2) {
      left: 95px;
      width: 80px;
      height: 100%;
      padding-top: 20px;
      font-size: 16px;
      text-align: left;
      color: #f5f5f5;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      font-family: KaiTi;
      cursor: pointer;
      &:hover + div {
        display: block;
      }
    }
  }
  .header-btn {
    cursor: pointer;
    outline: none;
  }
  .user_img:hover{
    .userInfo{
      display: block;
    }
  }
  .userInfo {
    &:hover {
      display: block;
    }
    width: 200px;
    background-color: #1890ff;
    z-index: 100;
    position: absolute;
    top: 62px;
    left: 660px;
    display: none;
    text-align: left;
    padding: 1em;
    div {
      cursor: pointer;
      &:nth-of-type(1) {
        display: flex;
        align-items: center;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          position: static;
          margin: 0 10px 0 5px
        }
      }
      &:nth-of-type(2) {
        font-size: 12px;
        margin: 5px 0 0 3px;
        span {
          &:nth-of-type(1) {
            margin-right: 20px;
          }
        }
      }
      &:nth-of-type(3) {
        width: 100%;
        height: 0.5px;
        background-color: #000;
        margin-top: 2px;
      }
      &:nth-of-type(4) {
        overflow: hidden;
        margin-top: 5px;
        font-size: 12px;
        span {
          &:nth-of-type(1) {
            float: left;
          }
          &:nth-of-type(2) {
            float: right;
          }
        }
      }
      &:nth-of-type(5) {
        overflow: hidden;
        margin-top: 5px;
        font-size: 12px;
        span {
          &:nth-of-type(1) {
            float: left;
          }
          &:nth-of-type(2) {
            float: right;
          }
        }
      }
      &:nth-of-type(6) {
        overflow: hidden;
        margin-top: 5px;
        font-size: 12px;
        span {
          &:nth-of-type(1) {
            float: left;
          }
          &:nth-of-type(2) {
            float: right;
          }
        }
      }
      &:nth-of-type(7) {
        overflow: hidden;
        margin-top: 5px;
        font-size: 12px;
        span {
          &:nth-of-type(1) {
            float: left;
          }
          &:nth-of-type(2) {
            float: right;
          }
        }
      }
      &:nth-of-type(8) {
        overflow: hidden;
        margin-top: 5px;
        font-size: 12px;
        span {
          &:nth-of-type(1) {
            float: left;
          }
          &:nth-of-type(2) {
            float: right;
          }
        }
      }
      &:nth-of-type(9) {
        overflow: hidden;
        margin-top: 5px;
        font-size: 12px;
        text-align: center;
        button {
          width: 120px;
          height: 30px;
          position: static;
        }
      }
      .num {
        margin-right: 10px;
      }
      .arrow {
        position: relative;
        top: -1px;
      }
    }
  }

  button {
    position: relative;
    height: 29px;
    top: 17px;
    color: rgba(16, 16, 16, 1);
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    &:nth-of-type(1) {
      left: 30px;
      width: 29px;
      top: 18px;
      color: white;
      background-color: #5fa1ef;
      opacity: 0.5;
      border-radius: 3px;
      border-width: 0;
      margin: 0;
      outline: none;
      font-family: KaiTi;
      font-size: 17px;
      text-align: center;
      cursor: pointer;
      font-weight: bolder;
      &:hover {
        background-color: #0E61AD;
      }
    }
    &:nth-of-type(2) {
      width: 29px;
      left: 35px;
      top: 18px;
      margin-right: 10px;
      color: white;
      background-color: #5fa1ef;
      opacity: 0.5;
      border-radius: 3px;
      border-width: 0;
      margin: 0;
      outline: none;
      font-family: KaiTi;
      font-size: 17px;
      text-align: center;
      cursor: pointer;
      font-weight: bolder;
      &:hover {
        background-color: #0E61AD;
      }
    }
    &:nth-of-type(3) {
      border: none;
      background-color: rgba(255, 255, 255, 0);
      left: 40px;    
      color: #f5f5f5;
      font-size: 20px;
      font-family: KaiTi;
      margin-right: 10px;
    }
    &:nth-of-type(4) {
      border: none;
      background: rgba(255, 255, 255, 0);
      left: 40px;
      color: #f5f5f5;
      font-size: 20px;
      font-family: KaiTi;
      margin-right: 10px;
    }
    &:nth-of-type(5) {
      position: relative;
      left: 100px;
      width: 131px;
      font-size: 14px;
      margin-left: 30px;
      font-family: PingFang SC;
      border: 1px solid rgba(187, 187, 187, 1);
      color: #f5f5f5;
     // background-color: #0F4F99;
      background-color:#82a8d87a;
     // opacity: 0.5;
      border-radius: 3px;
      border-width: 0;
      margin: 0;
      outline: none;
      font-family: KaiTi;
      font-size: 17px;
      text-align: center;
      cursor: pointer;
      &:hover {
        background-color: #0E61AD;
      }
    }
  }

  input:nth-of-type(1) {
    width: 200px;
    height: 30px;
    color: #f5f5f5;
   // background-color: rgb(22, 72, 136);
    background-color: #82a8d87a;
    //opacity: 0.5;
    border-radius: 3px;
    border-width: 0;
    margin: 0;
    outline: none;
    font-family: KaiTi;
    font-size: 17px;
    // text-align: center;
    padding-left: 15px;
    cursor: pointer;
    overflow: hidden;
    // &:hover{
    //   background-color: #0E61AD;
    // }  
  } 
  ::-webkit-input-placeholder {
    color: #f5f5f5e3;
    font-size: 17px;    
  }
  .btnGroup {
    display: flex;
    justify-content: flex-end;
    button {
      position: relative;
      border: none;
      background: rgba(255, 255, 255, 0);
      left: 130px;
      top: 20px;
      width: 31px;
      border: 1px solid rgba(187, 187, 187, 1);
      color: rgba(255, 255, 255, 1);
    }
  }
  .search {
    border-radius: 15px;
    display: inline-block;
    overflow: hidden;
    width: 200px;
    height: 30px;
    position: relative;
    top: 18px;
    left: 50px;
    img {
      width: 23px;
      height: 23px;
      position: absolute;
      top: 3px;
      left: 170px;
      cursor: pointer;
    }
  }
}
